/**
* 头部菜单
*/ 
<template>
  <el-menu
    class="el-menu-demo"
    mode="horizontal"
    background-color="#fff"
    text-color="#000"
    active-text-color="#000"
  >
    <el-button class="buttonimg">
      <img
        class="showimg"
        :src="collapsed ? imgsq : imgshow"
        @click="toggle(collapsed)"
      />
    </el-button>
    <!-- <span class="font16 margin-l25">24小时客服热线：400-8866-064</span> -->
    <el-submenu index="2" class="submenu">
      <template slot="title">
        {{ user.userName }}
      </template>
      <el-menu-item @click="content('/gAuth')" index="2-1">
        Google认证
      </el-menu-item>
      <el-menu-item @click="content('/myInfo')" index="2-2" v-if="user.userType == '00'|| user.userType == '03'">
        个人中心
      </el-menu-item>
      <el-menu-item @click="content('/myInfo2')" index="2-2" v-else>
        个人中心
      </el-menu-item>
      <el-menu-item @click="exit()" index="2-3">退出</el-menu-item>
    </el-submenu>

    <span class="font-w6 font18 f-r margin-r20" v-if="user.userType != '00'">
      ID：{{ user.userId }}
    </span>
  </el-menu>
</template>
<script>
import { mapState, mapGetters } from "vuex";
import {
  setStoreS,
  getStoreS,
  removeStoreS,
  insertCharacter,
} from "../utils/util";
import { reqtoken } from "../api/axiosFun";
export default {
  name: "navcon",
  data() {
    return {
      collapsed: true,
      imgshow: require("../assets/img/show.png"),
      imgsq: require("../assets/img/sq.png"),
      user: {},
    };
  },
  // 创建完毕状态(里面是操作)
  created() {
    if (this.$store.state.user) {
      this.user = JSON.parse(this.$store.state.user);
    }

    // reqtoken("post","/jwt/refresh").then((res) => {
    //   console.log(res,987);
    // })
  },
  computed: {
    ...mapGetters(["getUser"]),
  },
  watch: {
    getUser(newVal) {
      this.user = JSON.parse(newVal);
    },
  },
  methods: {
    exit() {
      this.$confirm("退出登录, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(() => {
          this.logout();
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消",
          });
        });
    },
    logout() {
      reqtoken("post", "/jwt/logout").then((res) => {
        removeStoreS("ssttkktt");
        // removeStoreS("l_token");
        this.$message({
          type: "success",
          message: "已退出登录!",
        });
        if (this.user.userType == "00") {
          this.$router.push({ path: "/loginAdmin" });
        } else {
          this.$router.push({ path: "/login" });
        }
        this.$store.commit("logout", "false");
      });
    },
    content(name) {
      this.$router.push({ path: name });
    },
    // 切换显示
    toggle(showtype) {
      this.collapsed = !showtype;
      this.$root.Bus.$emit("toggle", this.collapsed);
    },
  },
};
</script>
<style scoped>
.el-menu-vertical-demo:not(.el-menu--collapse) {
  border: none;
}
.submenu {
  float: right;
}
.el-menu,
/deep/.el-submenu .el-submenu__title {
  height: 50px;
  line-height: 50px;
  margin: 0;
}
.buttonimg {
  background-color: transparent;
  border: none;
}
.showimg {
  width: 26px;
  height: 26px;
  position: absolute;
  /* top: 17px; */
  top: 10px;
  left: 17px;
}
.showimg:active {
  border: none;
}

/deep/.el-submenu.is-active .el-submenu__title {
  border-bottom: 2px solid transparent !important;
}
</style>